/<template>
  <div class="name">
    <div class="top">
      <h1>远读重洋</h1>
      <span>查看更多></span>
    </div>
    <div class="buttom">
      <div class="buttom_item" v-for="(item, index) in arr" :key="index">
        <div class="buttom_left"><img :src="item.img" alt="" /></div>
        <div class="buttom_right">
          <h3>{{ item.name }}</h3>
          <p>{{ item.title }}</p>
          <div class="pss">
            <div class="pss_item">
              <img src="../../assets/img/播者.png" alt="" />
              <span>{{ item.con }}</span>
            </div>
            <div class="pss_item">
              <img src="../../assets/img/播放.png" alt="" />
              <span>{{ item.cons }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          img: require("../../assets/img/yuan.png"),
          name: "斯坦福大学人生设计课",
          title: "生活没有统一的模式，每个人也不是只有一种活法。",
          con: "张菊红",
          cons: "247603",
        },
        {
          img: require("../../assets/img/guancnag.png"),
          name: "牛顿传",
          title: "生活没有统一的模式，每个人也不是只有一种活法。",
          con: "张菊红",
          cons: "247603",
        },
        {
          img: require("../../assets/img/si.png"),
          name: "枪炮、病菌与钢铁",
          title: "生活没有统一的模式，每个人也不是只有一种活法。",
          con: "张菊红",
          cons: "247603",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.name {
  width: 90%;
  height: 480px;
  //   background: pink;
  margin: 40px 20px 0 20px;
  border-radius: 18px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.04);
  background: #fff;
}
.top {
  width: 100%;
  height: 70px;
  //   background: goldenrod;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top h1 {
  font-size: 24px;
  padding: 0 15px;
}
.top span {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  padding: 0 10px;
}
.buttom {
  width: 100%;
  height: 410px;
  margin-top: -10%;
  //   background: #666666;
  //   display: flex;
}
.buttom_item {
  width: 100%;
  height: 100px;
  //   background: #666666;
  display: flex;
  margin: 35px 0;
}
.buttom_left {
  width: 35%;
  height: 100%;
  //   background: purple;
}
.buttom_left img {
  width: 110px;
  height: 110px;
  border-radius: 14px;
}
.buttom_right {
  width: 45%;
  height: 100%;
}
.buttom_right h3 {
  width: 209px;
  height: 19px;
  margin: 5px 0 5px 5px;
  display: flex;

  overflow: hidden;
  white-space: nowrap;
  /*文字超出宽度则显示ellipsis省略号*/
  text-overflow: ellipsis;
}
.buttom_right p {
  width: 196px;
  height: 30px;
  display: flex;
  flex-wrap: wrap;
  margin-left: 7px;
}
.pss {
  width: 100%;
  height: 40px;
  //   background: pink;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0px 0 5px 5px;
}

.pss img {
  width: 14px;
  height: 14px;
}
</style>

